/* 编辑区面板 */

.page-padding() {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--custom-editor-padding-left) !important;
    padding-right: var(--custom-editor-padding-right) !important;
}

// deprecated: 使用 [data-fullwidth="true"] 判断是否开启自适应宽度
.page-margins() {

    // 关闭自适应宽度后会使用 width 属性限制内容宽度
    &:not([style *="width"]) {
        margin-left: var(--custom-editor-padding-left) !important;
        margin-right: var(--custom-editor-padding-right) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

// 块引用计数
.refcont(@right: calc(4px - var(--custom-editor-padding-right))) {
    .protyle-attr {
        .protyle-attr--refcount {
            /* 块引用计数 */
            background-color: transparent;
            box-shadow: 0 0 var(--custom-toolbar-tiem-active-box-shadow-spread) 0 var(--custom-box-shadow-color);
            z-index: 1; // 避免被块滚动条覆盖
            right: @right;
        }
    }
}

.fn__flex-1.protyle.fullscreen {
    .protyle-content {
        /* 全屏模式编辑区 */
        background-color: var(--custom-editor-background-color);
        backdrop-filter: var(--custom-backdrop-filter);
    }
}

#editor,
.layout-tab-container {
    /* 编辑区 */
    background-color: var(--custom-editor-background-color);
}

// PDF 书签栏
#sidebarContainer,
// 编辑区
.protyle {
    background: transparent;
}

// 编辑区
.protyle {
    overflow-y: hidden;
}

// 加载中
// .fn__loading
.wysiwygLoading {
    background-color: transparent !important;
}

// 编辑区内容
.protyle-content {

    // 开启自适应宽度
    &[data-fullwidth=true] {
        >.protyle-background {
            >.protyle-background__iconw {
                /* 文档标志 */
                left: var(--custom-editor-padding-left) !important;
            }

            // 题头图控件组
            .protyle-icons {

                // 题头图控件
                .protyle-icon {
                    input[type=file] {
                        /* 上传文件控件 */
                        z-index: 1; // position: absolute, 需要设置 z-index, 否则无法捕获点击事件
                    }
                }
            }
        }

        >.protyle-title,
        >.protyle-wysiwyg {
            .page-padding();
        }

        >.protyle-title {
            .protyle-title__icon {
                /* 调整文档块标位置 */
                left: calc(var(--custom-editor-padding-left) - 22px);
            }
        }
    }

    // 单页面自适应宽度
    >.protyle-wysiwyg[custom-sy-fullwidth=true] {
        .page-padding();
    }

    // deprecated: 使用 [data-fullwidth="true"] 判断是否开启自适应宽度
    // >.protyle-background {
    //     >.protyle-background__iconw {
    //         // 开启自适应宽度后边距在 96px 与 16px之间切换
    //         &:is([style="left:96px"], [style="left:16px"]) {
    //             /* 文档标志 */
    //             left: var(--custom-editor-padding-left) !important;
    //         }
    //     }
    // }

    >.protyle-title {
        /* 标题 */
        // deprecated: 使用 [data-fullwidth="true"] 判断是否开启自适应宽度
        // .page-margins();

        .refcont(4px); // 文档块引用计数

        .protyle-title__input {
            /*编辑区文件名*/
            background: transparent;
        }
    }

    >.protyle-wysiwyg {
        // deprecated: 使用 [data-fullwidth="true"] 判断是否开启自适应宽度
        // .page-margins();

        .refcont(); // 块引用计数

        // 拖拽
        .dragover__top {
            box-shadow: 0 -4px 0 var(--custom-drag-top-shadow-color) !important;
        }

        .dragover__bottom {
            box-shadow: 0 4px 0 var(--custom-drag-bottom-shadow-color) !important;
        }

        .dragover__left {
            box-shadow: -4px 0 0 var(--custom-drag-left-shadow-color) !important;
        }

        .dragover__right {
            box-shadow: 4px 0 0 var(--custom-drag-right-shadow-color) !important;
        }
    }

}

.protyle-scroll {
    width: 15px;
    right: 8px;
    margin: 0 4px;
    padding: 0;

    .protyle-scroll__bar {
        // right: -97px;
        right: calc(3px - var(--b3-dynamicscroll-width) / 2);
        // z-index: 1;
    }
}

.protyle-preview {
    /* 导出预览 */
    background-color: transparent;
    backdrop-filter: none;

    .protyle-preview__action {
        /* 预览样式选择栏 */
        background-color: var(--custom-components-deep);

        >button {
            /* 预览样式选择按钮 */
            background-color: transparent;
            border-radius: var(--custom-border-radius);

            &:hover {
                /* 鼠标悬浮 */
                background-color: var(--b3-theme-background-light);
            }
        }
    }

    >.b3-typography {
        .page-padding();
    }
}
